<template>
	<view class="container">
		  <canvas type="2d" id="myCanvas" class="sky-canvas"></canvas>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.drawSky();
		},
		methods: {
			drawSky() {
				 const query = wx.createSelectorQuery()
				  query.select('#myCanvas')
				       .fields({ node: true, size: true })
				       .exec((res) => {
				         const canvas = res[0].node
				         const ctx = canvas.getContext('2d')
				 
				         const dpr = wx.getSystemInfoSync().pixelRatio
				         canvas.width = res[0].width * dpr
				         canvas.height = res[0].height * dpr
				         ctx.scale(dpr, dpr)
						
						 // 绘制天空背景
						         ctx.fillStyle = '#b3e0ff'; // 天空背景色
						        ctx.fillRect(0, 0, dpr, dpr)
						 
						         // 绘制白云
						         ctx.fillStyle = '#b3e0ff'; // 白色
						         ctx.beginPath();
						         ctx.arc(200, 100, 50, 0, Math.PI * 2);
						         ctx.arc(250, 100, 70, 0, Math.PI * 2);
						         ctx.arc(300, 100, 50, 0, Math.PI * 2);
						         ctx.arc(350, 100, 60, 0, Math.PI * 2);
						         ctx.arc(400, 100, 50, 0, Math.PI * 2);
						         ctx.closePath();
						         ctx.fill();
								
				       })
			
			}
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.sky-canvas {
		width: 100%;
		height: 100%;
		background-color: white;
		/* 天空背景色 */
	}
</style>